#{meta /}

#{stylesheet "words/character-index.css"/}

#{title '汉字词'/}

#{body}

<div class="container">
	<div class="row">
		<div class="col-lg-2 col-sm-3 col-xs-6">
			<h3>汉字词</h3>
			#{component.left-side-index indexes/}
		</div>
		<div class="col-lg-10 col-sm-9 col-xs-6">
			<div class="row">
				<div class="col-lg-10">
					<h3>${index}</h3>
				</div>
			</div>
			<hr/>
			#{list items:pinyins, as:'pinyin'}
			<div class="div-pinyin-groups">
				<div class="pinyin-value">${pinyin.name}</div>
				
				#{list items:pinyin.characters, as:'character'}
				<div class="div-character-groups">
					<div class="character-value font-jp">${character.name}</div>
					<table class="table table-bordered table-words">
						#{list items:character.words, as:'word'}
							<tr>
								<th class="word-value font-jp"><a href="@{notionals.NotionalWordEdit.index(word.id, request.url)}">${word.value}</a></th>
								<td>
									#{list items:word.syllables, as:'syllable'}
										<div>${syllable}</div>
									#{/list}
								</td>
								<td>
									#{list items:word.meanings, as:'meaning'}
										<div>${meaning}</div>
									#{/list}
								</td>
								<td>
									#{list items:word.types, as:'type'}
										<span>${type}</span>
									#{/list}
								</td>
							</tr>
						#{/list}
					</table>
				</div>
				#{/list}
			</div>
			#{/list}
			#{else}
				<p>（无）</p>
			#{/else}
		</div>
	</div>
</div>

#{/body}
